<template>
	<view class="page-content">
		<u-navbar title="兑换下单" :autoBack="true" :bgColor="them_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'" v-if="loading == false">
			<scroll-view scroll-y="true" v-bind:style="{'height': scroll_Height }">

				<view class="goods-box">
					<view class="address-box" v-if="address_list.length > 0 ">
						<view class="name">
							<text class="txt">收货人&ensp;:</text>
							<text>
								{{address.consignee}}
							</text>
							<text style="padding-left: 20rpx;">
								{{address.mobile}}
							</text>
							<view class="txt-2" @click="address_isShow = true">
								选择地址
							</view>
						</view>
						<view class="address">
							<text class="txt">收货地址&ensp;:</text>
							<text>
								{{address.province_name}}{{address.city_name}}{{address.district_name}}
								{{address.address}}
							</text>
						</view>
						<view class='line'>
							<image :src="ima_url+'/statics/yilangmp/line.jpg'"></image>
						</view>
					</view>
					<view class="address-box" v-else>
						<view class="name">
							<text class="txt">暂无地址</text>
							<view class="txt-2" @click="goAddressPages()">
								去设置
							</view>
						</view>
						<view class="address">

						</view>
						<view class='line'>
							<image :src="ima_url+'/statics/yilangmp/line.jpg'"></image>
						</view>
					</view>


					<view class="goods">
						<view class="title title2 " v-if="shipping_list_arr.length == 0">
							该店铺没有配送方式，不支持下单，当前订单提交时不包过订单中该店铺的商品
						</view>

						<view class="acea-row row-between goods-item" @click.stop="goodsDetails(goods_id)">
							<view class="left">
								<view class="img">
									<image :src="goodInfo.goods_thumb" mode=""></image>
								</view>
							</view>
						
							<view style="padding-left: 10px;flex: 1;" class="acea-row row-column-between">
								<view class="fs-16">
									{{goodInfo.goods_name}}
								</view>
								<view class="modle" v-if="goodInfo.goods_attr != null">
									<text style="padding-right: 10rpx;">型号&ensp;:</text>
									<text>{{goodInfo.goods_attr}}</text>
								</view>
								<view style="text-align: right;">
									兑换积分：{{goodInfo.shop_price}}
								</view>
								<view style="text-align: right;">
									x{{goodInfo.goods_number}}
								</view>
							</view>
						</view>

						<view class="pay-methods" style="padding: 0 20px 10px 20px;">
							<view style="margin-bottom: 10px;">
								配送方式(<text style="color: #CC0518;">必选，否则该店铺的订单无效</text>)
							</view>

							<u-subsection :list="shipping_list_arr" :current="select_type_current" keyName="name"
								@change="selectShipTpype"></u-subsection>

							<view v-if="selected_shipping_list.length > 0 " style="padding-top: 10px;">
								<u-radio-group v-model="selectedShippingName" placement="column">
									<u-radio :customStyle="{marginBottom: '8px'}"
										v-for="(item, index) in selected_shipping_list" :key="index"
										:label="item.shipping_name" :name="item.shipping_name" @change="radioChange">
									</u-radio>
								</u-radio-group>
							</view>
						</view>
						<!-- 		<view style="padding: 0 20px 10px 20px;">
							送货时间
						</view>
						<view class="pay-methods padding20">
							<view class="pay-item" style="padding-top: 0;">
								<view>
									<radio-group @change="dataRadioChange">
										<view class="item">
											<radio @click="goods_index = i " value="工作日/周末/节假日均可" />
											<text class="txt-2">工作日/周末/节假日均可</text>
										</view>
										<view class="item">
											<radio @click="goods_index = i " value="仅工作日送货" />
											<text class="txt-2">仅工作日送货</text>
										</view>
										<view class="item">
											<radio @click="goods_index = i " value="仅周末送货" />
											<text class="txt-2">仅周末送货</text>
										</view>
										<view class="item">
											<radio @click="goods_index = i " value="指定送货时间" />
											<text class="txt-2">指定送货时间</text>
										</view>
									</radio-group>
									<view class="item" style="color: #A7A7A7;font-size: 24rpx;">
										送货时间仅供参考，快递员会尽量满足你的要求
									</view>
								</view>
							</view>
						</view> -->
						<view style="padding: 0 20px 10px 20px;">
							订单留言
						</view>
						<view class="s-time-box" style="padding-bottom: 50rpx;">
							<u--textarea v-model="postscript" placeholder="请输入留言"></u--textarea>
						</view>
					</view>

					<view class="s-time-box-2" style="margin-top: 20rpx;">
						<view class="s-time-title" style="border: none;height: 80rpx;">
							<view style="height: 80rpx;display:flex; line-height: 50rpx;">
								<view style="flex:1;">
									商品合计
								</view>
								<view style="flex:1;text-align: right;color: #D32D3C;">
									兑换积分：{{total_price}}
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="bottom-box acea-row row-between-wrapper">
					<view class="left">
						兑换积分&ensp;:
						<text style="color: #D32D3C;padding-left: 10rpx;">
							￥{{total_price}}
						</text>
					</view>
					<view class="right" @click="submitOrder()">
						提交订单
					</view>
				</view>

			</scroll-view>
		</view>

		<u-popup :show="address_isShow" mode="bottom" @close="address_close" closeable="true" :safeAreaInsetTop="true" :round="8">
			<view class="address-window">
				<view class='list'>
					<view class='item acea-row row-between-wrapper' :class='address_index==index?"font-num":""'
						v-for="(item,index) in address_list" @tap='tapAddress(index,item.address_id)' :key='index'>
						<text class='iconfont icon-ditu' :class='address_index==index?"font-num":""'></text>
						<view class='address'>
							<view class='name' :class='address_index==index?"font-num":""'>{{item.consignee}}<text
									class='phone'>{{item.mobile}}</text></view>
							<view class='line1'>
								{{item.province_name}}{{item.city_name}}{{item.district_name}}{{item.address}}
							</view>
						</view>
						<text class='iconfont icon-complete' :class='address_index==index?"font-num":""'></text>
					</view>
				</view>
				<!-- 无地址 -->
				<view class='pictrue' v-if="!address_list.length">
					<u-empty text="暂无添加地址" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
				<view class='addressBnt bg-color' @tap='goAddressPages'>选择其它地址</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>

		<u-skeleton rows="5" :loading="loading" :animate="true"></u-skeleton>
	</view>

</template>

<script>
	import {
		address_list,
		get_regions,
		address_edit_add
	} from '@/api/user.js';
	import {
		exchange_buy_now,
		sub_exchange
	} from '@/api/store.js';
	import {
		mapGetters
	} from "vuex";
	import {
		BASE_URL
	} from '@/config/app';
	export default {
		data() {
			return {
				is_address: false, //是否从地址列表进来
				navH: '',
				them_color: getApp().globalData.theme_color,
				address_list: [],
				address: {}, //存放默认地址
				address_defaul_isShow: false, //判断是否有默认地址
				address_id: '',
				address_isShow: false,
				address_index: 0,

				goodInfo: {},
				shipping_list_arr: [],
				select_type_current: 0,
				selected_shipping_list: [],
				selectedShippingName: '',
				selectedShippingId: 0,
				postscript: '',
				best_time: '',

				total_price: '',
				
				goods_index: 0,

				ima_url: BASE_URL,

				goods_id: '',
				goods_number: '',

				loading: true,
			}
		},
		computed: mapGetters(['isLogin', 'app_token']),
		onLoad(e) {
			this.navH = getApp().globalData.navHeight / 2;

			this.is_address = e.is_address != undefined ? true : false;
			this.goods_id = e.rec_id;
			this.goods_number = e.number;
			this.address_id = e.address_id;

		},
        onShow() {
        	this.exchangeBuyNow()
        },
		methods: {
			getAddressList(is_address) {
				var _this = this;
				address_list({
					app_token: _this.app_token
				}).then((res) => {
					_this.address_list = res.data;
					if (_this.address_list.length > 0) {
						if (!is_address) { //不是从地址列表进来
							for (let value of _this.address_list) {
								if (value.is_default == 1) {
									// 1 ：默认地址 0：不是默认地址
									_this.address = value;
									_this.address_defaul_isShow = true;
									_this.address_id = value.address_id;
								}
							}
							if (_this.address_defaul_isShow == false && _this.address_list.length >
								0) { //没有默认地址，那就取第一个
								_this.address = _this.address_list[0];
								_this.address_id = _this.address_list[0].address_id;
							}
						} else { //从地址列表进来
							for (let value of _this.address_list) {
								if (value.address_id == _this.address_id) {
									_this.address = value;
									_this.address_defaul_isShow = true;
									_this.address_id = value.address_id;
								}
							}
						}
					}
				})
			},
			exchangeBuyNow() {
				var that = this;
				// 立即兑换页面
				exchange_buy_now({
					app_token: that.app_token,
					goods_id: that.goods_id,
					goods_number: that.goods_number,
				}).then((res) => {
					if (res.status == -1) {
						return that.$util.Tips({
							title: res.msg,
							endtime: 3000
						}, {
							tab: 3
						})
					}
					that.loading = false;
					that.getAddressList(that.is_address)
					that.total_price = res.data.total_price;

					that.goodInfo = res.data;

					let shipping_obj = res.data.shipping_type

					for (var key in shipping_obj) {
						that.shipping_list_arr.push(shipping_obj[key]);
					}

					that.selected_shipping_list = that.shipping_list_arr[0].shipping_list
					that.selectedShippingName = that.shipping_list_arr[0].shipping_list[0].shipping_name
					that.selectedShippingId = that.shipping_list_arr[0].shipping_list[0].shipping_id
				})

			},
			selectShipTpype(index) {
				var that = this
				this.select_type_current = index;

				for (var i = 0; i < that.shipping_list_arr.length; i++) {
					that.selected_shipping_list = that.shipping_list_arr[index].shipping_list
					that.selectedShippingName = that.shipping_list_arr[index].shipping_list[0].shipping_name
					that.selectedShippingId = that.shipping_list_arr[index].shipping_list[0].shipping_id
				}

			},

			radioChange(e) {
				var that = this
				for (var i = 0; i < that.selected_shipping_list.length; i++) {
					if (that.selected_shipping_list[i].shipping_name == e) {
						that.selectedShippingId = that.selected_shipping_list[i].shipping_id
					}
				}
			},

			// 查看商品详情
			goodsDetails: function(goods_id) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + goods_id
				})
			},

			address_close() {
				this.address_isShow = false;
			},

			tapAddress: function(e, addressid) {
				this.address_index = e;
				this.address = this.address_list[this.address_index];
				this.address_id = this.address_list[this.address_index].address_id;
				this.address_isShow = false;
			},

			goAddressPages: function() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index?from=integral&goods_id=' + this.goods_id +
						'&goods_number=' + this.goods_number
				});
			},

			// 提交订单 （立即购买）
			submitOrder: function() {
				var that = this;
				sub_exchange({
					app_token: that.app_token,
					goods_id: that.goods_id,
					goods_number: that.goods_number,
					address_id: that.address_id,
					shipping_id: that.selectedShippingId,
					best_time: that.best_time,
					postscript: that.postscript,
				}).then((res) => {
					if (res.status >= 0) {
						that.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								uni.redirectTo({
									url: '/pages/users/user_integral/index'
								})
							}
						})
					} else {
						that.$util.Tips({
							title: res.msg
						})
					}
				})

			},

		}

	}
</script>
<style lang="scss" scoped>
	.page-content {
		font-size: 28rpx;

		.goods-box {
			background-color: #EEEEEE;
			padding-bottom: 150rpx;

			.goods {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;

				.title {
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 70rpx;
					position: relative;

					.img {
						width: 45rpx;
						height: 45rpx;
						position: absolute;
						top: 10rpx;
						left: 12rpx;

						image {
							width: 45rpx;
							height: 45rpx;
							object-fit: cover;

						}
					}
				}

				.title2 {
					line-height: 40rpx;
					font-size: 24rpx;
					color: #CC0518;
					padding-left: 0rpx;
					padding: 0 20rpx;
				}

				.goods-item {
					margin-bottom: 5rpx;
					padding: 30rpx;
					padding-right: 10rpx;
					background-color: #F2F2F2;
					display: flex;

					.left {
						.img {
							width: 200rpx;
							height: 200rpx;
							margin: 0 auto;
							image {
								width: 200rpx;
								height: 200rpx;
								object-fit: cover;
							}
						}
					}

					
				}

				.s-time-box {

					padding: 0 20px;

					.s-time-title {
						height: 80rpx;
						padding-left: 60rpx;
						position: relative;
						border-bottom: 1px solid #DEDEDE;
					}

					.input {
						height: 80px;
						border: 1px solid #DEDEDE;
					}
				}

			}

			.address-box {
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #FFFFFF;

				.name {
					padding-left: 50rpx;
					padding-right: 100rpx;
					position: relative;

					.txt {
						padding-right: 10rpx;
					}

					.txt-2 {
						width: 150rpx;
						height: 70rpx;
						line-height: 70rpx;
						position: absolute;
						top: 20rpx;
						right: 0;
						bottom: 0;
						font-size: 24rpx;
						text-align: center;
						background-color: $theme-color;
						border-top-left-radius: 20px;
						border-bottom-left-radius: 20px;
						color: white;
					}
				}

				.address {
					height: 100rpx;
					line-height: 50rpx;
					padding-left: 50rpx;
					padding-right: 30rpx;
					overflow: scroll;

					.txt {
						padding-right: 10rpx;
					}
				}

				.line {
					height: 3rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}

			.pay-type {
				background-color: #FFFFFF;

				.title {
					padding: 0 30rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 28rpx;
				}

				.radio-box {

					.radio-item {
						height: 80rpx;
						line-height: 80rpx;
						padding: 0 30rpx;
						display: flex;

						.radio-txt {
							margin-left: 10rpx;
							padding: 5rpx 15rpx;
							background-color: #C60B1C;
							color: #FFFFFF;
							font-size: 24rpx;
							border-radius: 8rpx;
						}
					}
				}

			}

			.s-time-box-2 {
				padding: 20rpx;
				padding-bottom: 0;
				background-color: #FFFEFF;

				.s-time-title {
					height: 80rpx;
					padding-left: 20rpx;
					position: relative;
					border-bottom: 2rpx solid #DEDEDE;
					vertical-align: middle;

					image {
						width: 50rpx;
						height: 50rpx;
						object-fit: cover;
						position: absolute;
						vertical-align: middle;
						top: 20;
						left: 0;
					}

				}

				.input {
					height: 80rpx;
					margin: 0 auto;
					padding-left: 20rpx;
					padding-right: 20rpx;
					border: 2rpx solid #DEDEDE;
				}
			}

		}

		.bottom-box {
			height: 80rpx;
			background-color: #FFFFFF;

			.left {
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 20px;
			}

			.right {
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20px;
				background-color: $theme-color;
				text-align: center;
				color: #FFFEFF;
				padding: 0 20px;
				margin-right: 20px;
			}
		}

		.select-address {
			position: fixed;
			top: 0rpx;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 100;

			.address-item {
				width: 95%;
				height: 900rpx;
				margin: 0 auto;
				margin-top: 150rpx;
				background-color: #FFFEFF;
				border: 2rpx solid #DEDEDE;
				border-radius: 20rpx;

				.bottom {
					height: 100rpx;
					line-height: 100rpx;
					display: flex;

					.left {
						flex: 1;
						height: 100rpx;
						text-align: center;

						.txt {
							padding: 10rpx 30rpx;
							background-color: #989898;
							border-radius: 10rpx;
						}
					}

					.right {
						flex: 1;
						height: 100rpx;
						text-align: center;

						.txt {
							padding: 10rpx 30rpx;
							background-color: #C60B1C;
							color: #FFFFFF;
							border-radius: 10rpx;
						}
					}

				}

				.item-box {
					padding: 30rpx;

					.ad-txt {
						height: 100rpx;
						line-height: 100rpx;
						text-align: right;
						padding-right: 20rpx;
						color: #C60B1C;
					}

					.item {
						font-size: 24rpx;
						line-height: 50rpx;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #DEDEDE;
						position: relative;

						.txt {
							padding-left: 60rpx;
						}

						.edit-img {
							width: 45rpx;
							height: 45rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;

							image {
								width: 45rpx;
								height: 45rpx;
							}
						}

						.delect-img {
							position: absolute;
							top: 65rpx;
							right: 0rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.txt-mo {
							padding-left: 20rpx;
							color: #ACACAC;
						}

						.txt-ad {
							display: inline-block;
							padding-left: 65rpx;
							padding-right: 60rpx;
						}

						.txt-na {
							font-weight: 600;
						}

					}

					.item2 {
						padding-left: 60rpx;
					}
				}

			}
		}

	}
</style>
<style scoped lang="scss">
	.address-window {
		width: 100%;
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		height: 129rpx;
		font-size: 25rpx;
		color: #333;
	}

	.address-window .list .item .iconfont {
		font-size: 37rpx;
		color: #2c2c2c;
	}

	.address-window .list .item .iconfont.icon-complete {
		font-size: 30rpx;
		color: #fff;
	}

	.address-window .list .item .address {
		width: 560rpx;
	}

	.address-window .list .item .address .name {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 4rpx;
	}

	.address-window .list .item .address .name .phone {
		margin-left: 18rpx;
	}

	.address-window .addressBnt {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
	}

	.address-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 0 auto;
	}

	.address-window .pictrue image {
		width: 100%;
		height: 100%;
	}
</style>